<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	*{ padding:0; margin:0;}
	div{ width:100px; height:100px; background:red; position:absolute; left:0; top:0;}
	.tip{width:80px; height:80px; border:10px dotted blue; position:absolute; top:0; left:0 }
</style>
<script>
	window.onload=function(){
		var oDiv=document.querySelector('div');
		
		var x=0;
		var y=0;
		oDiv.onmousedown=function(ev){
			var oTip=document.createElement('p');
			oTip.className='tip';
			oTip.style.left=x+'px';
			oTip.style.top=y+'px';	
			document.body.appendChild(oTip);
			var ev=ev||event;
			var disX=ev.clientX-oDiv.offsetLeft;
			var disY=ev.clientY-oDiv.offsetTop;
			document.onmousemove=function(ev){
				var ev=ev||event;
				x=ev.clientX-disX;
				y=ev.clientY-disY;
				oTip.style.left=x+'px';
				oTip.style.top=y+'px';	
			};
			document.onmouseup=function(){
				
				oDiv.style.left=x+'px';
				oDiv.style.top=y+'px';
				document.body.removeChild(oTip);
				document.onmouseup=null;
				document.onmousemove=null;
			};
			return false;
		};
			
	};
</script>
</head>

<body>
	<div></div>
</body>
</html>
